import React, { useState } from 'react'

//引入nanoid的包
import { nanoid } from 'nanoid';

import "./App.css"
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App() {
  //因为兄弟组件之间无法直接传值,所以将数据放在父组件中
  // 状态提升,初始化数据
  const [todoList, setTodoList] = useState([
    { id: nanoid(), todo: '唱歌', done: false },
    { id: nanoid(), todo: '跳舞', done: false },
    { id: nanoid(), todo: '吃饭', done: false },
  ])


  // 父组件setTodoList的函数传给子组件Header,子组件只需要调用这个改变todoList的方法即可
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header todoList={todoList} setTodoList={setTodoList} />
        <List todoList={todoList} />
        <Footer />
      </div>
    </div>
  )
}


